<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            padding: 0;
            margin: 0;
        }
        #container{
            width: 100%;
            height: 650px;
            background-color: #000000;
        }
    </style>
</head>
<body>
<div id="container">

</div>
<script type="module">
    import * as THREE from "./threejs/build/three.module.js";
    import { MapControls } from './threejs/jsm/controls/OrbitControls.js';
    import { OrbitControls } from './threejs/jsm/controls/OrbitControls.js';

    let renderer,scene,camera,cube;

    action();
    function action() {
        onload();
        run();
    }
    function onload() {
        let container=document.getElementById("container");//获取container

        scene=new THREE.Scene();//创建场景

        camera=new THREE.PerspectiveCamera(45,container.offsetWidth/container.offsetHeight,1,4000);
        camera.position.set(8,8,8);//创建相机并设置位置

        let axe=new THREE.AxesHelper(20);
        // scene.add(axe);//辅助工具，用于创建相机时，相机找到合适的位置


        /*let pointLight=new THREE.PointLight();//创建点光源
        pointLight.position.set(4,2,4);//设置光源的位置
        pointLight.intensity=1.5;//设置光强
        scene.add(pointLight);*/

        let ambientLight=new THREE.AmbientLight();
        ambientLight.position.set(4,2,4);
        scene.add(ambientLight);

        let geometry=new THREE.CubeGeometry(8,5,5);
        let material=new THREE.MeshPhongMaterial({ambient:0x050505,color:0x0033ff,specular:0x555555,shininess:30});
        let material1=new THREE.MeshPhongMaterial({ambient:0x888888,color:0x888888,specular:0x888888,shininess:30});
        let material2=new THREE.MeshPhongMaterial({ambient:0xFF44AA,color:0xFF44AA,specular:0xFF44AA,shininess:30});
        let material3=new THREE.MeshPhongMaterial({ambient:0xFF3333,color:0xFF3333,specular:0xFF3333,shininess:30});
        let material4=new THREE.MeshPhongMaterial({ambient:0xFFAA33,color:0xFFAA33,specular:0xFFAA33,shininess:30});
        let material5=new THREE.MeshPhongMaterial({ambient:0xBBFF00,color:0xBBFF00,specular:0xBBFF00,shininess:30});
        let texture=new THREE.TextureLoader();
        let cubeTexture=texture.load("./img/1.jpg");
        let brickTexture=texture.load("./img/bricks.jpg");
        let cloudTexture=texture.load("./img/clouds.jpg");
        let stoneWallTexture=texture.load("./img/stone-wall.jpg");
        let waterTexture=texture.load("./img/water.jpg");
        let woodFloorTexture=texture.load("./img/wood-floor.jpg");
        let cubeMaterial=new THREE.MeshPhongMaterial({map:cubeTexture});
        let brickMaterial=new THREE.MeshPhongMaterial({map:brickTexture});
        let cloudMaterial=new THREE.MeshPhongMaterial({map:cloudTexture});
        let stoneWallMaterial=new THREE.MeshPhongMaterial({map:stoneWallTexture});
        let waterMaterial=new THREE.MeshPhongMaterial({map:waterTexture});
        let woodFloorMaterial=new THREE.MeshPhongMaterial({map:woodFloorTexture});
        let materials=[cubeMaterial,brickMaterial,cloudMaterial,stoneWallMaterial,waterMaterial,woodFloorMaterial];
        let materialsx=[material,material1,material2,material3,material4,material5];
        let mesh=new THREE.Mesh(geometry,materialsx);
        scene.add(mesh);

        renderer=new THREE.WebGLRenderer({antialias:true});
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setClearColor(0xEEEEEE);
        renderer.setSize(container.offsetWidth,container.offsetHeight);
        container.appendChild(renderer.domElement);

        let contorl=new OrbitControls(camera,renderer.domElement);//添加鼠标滚动缩放，旋转对象


    }

    function run() {

        requestAnimationFrame(run);

        renderer.render(scene,camera);

    }


</script>
</body>
</html>
